/* eslint-disable */
<template>
	<!-- 自定义表格字段部分 -->
	<div class="definedTable">
	    <el-popover popper-class="popoverTable"  placement="top-end" width="140" v-model="selfdefineTableVisible"  @hide="selfdefineTable">
	    	<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('common.selectAll')}}</el-checkbox>
	        <el-checkbox-group class="popover_checck" v-model="checkedTableOptions" @change="checkChanged">
	            <el-checkbox v-for="(item,index) in headArr" :label="index" :key="index">{{item.label}}</el-checkbox>
	        </el-checkbox-group>
			<el-button  slot="reference"  size="small">{{$t('components.definedTable.autoDefine')}}</el-button>
		</el-popover>
    </div>
	<!-- 自定义表格字段部分 -->
</template>

<script>
import {
    Message, Notification, MessageBox, Loading
} from 'element-ui'
	export default {
    name: 'definedTable',
    props: [
        'headArr', 'selectArr', 'storageName'
    ],
    data () {
        return {
            selfdefineTableVisible: false,
            checkedTableOptions: [],
            checkAll: false,
            allOptions: [],
            isIndeterminate: false // 控制全选框的半选状态
        }
    },
    watch: {
        selectArr: 'selectArrChange',
        headArr: 'headArrChange'
    },
    mounted () {
        for (let i = 0; i < this.headArr.length; i++) {
            this.checkedTableOptions.push(i)
            this.allOptions.push(i)
        }
        let checkedCount = this.checkedTableOptions.length
	        this.checkAll = checkedCount === this.allOptions.length
	        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allOptions.length
		},
    methods: {
        headArrChange () { // 可选项发生变化时候触发
            for (let i = 0; i < this.headArr.length; i++) {
                this.allOptions.push(i)
            }
        },
        selectArrChange () { // 选择项发生变化时候触发
            this.checkedTableOptions = []
				for (let i = 0; i < this.selectArr.length; i++) {
                this.checkedTableOptions.push(this.selectArr[i].index)
            }
            let checkedCount = this.checkedTableOptions.length
		        this.checkAll = checkedCount === this.allOptions.length
		        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allOptions.length
			},
        selfdefineTable () { // 保存勾选
            let tempArr = this.checkedTableOptions.sort(this.compare)
            let pageObj = localStorage.getItem(this.storageName) // 捞出缓存中的该页面的表格配置
            if (pageObj) { // 如果缓存过该页面
                pageObj = JSON.parse(pageObj)
					pageObj[sessionStorage.userName] = tempArr  //将当前用户存到页面对象中
					localStorage.setItem(this.storageName, JSON.stringify(pageObj))
            }else {
                let tempObj = {}
                tempObj[sessionStorage.userName] = tempArr
                localStorage.setItem(this.storageName, JSON.stringify(tempObj))
            }
            this.$emit('saveAutoDefinedTable', tempArr)
        },
        checkChanged (value) { // 改变表单显示的head的勾选项
            this.checkedTableOptions = value
				let checkedCount = value.length
		        this.checkAll = checkedCount === this.allOptions.length
		        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allOptions.length
			},
        handleCheckAllChange (val) {
            this.checkedTableOptions = val ? this.allOptions : []
        		this.isIndeterminate = false
			},
        compare (x, y) { // 比较函数
            if (x < y) {
                return -1
            } else if (x > y) {
                return 1
            } else {
                return 0
            }
        }
    }
}
</script>
<style lang="less">
.definedTable{
	overflow:hidden;
	position:absolute;
	right:0px;
	top:0px;
	/deep/.el-popover__reference{
		background: #e6f1fc;
	    border: 1px solid #a3d0fd;
	    border-radius: 4px;
	}
}
.popover_checck .el-checkbox{
	margin-right: 15px;
	margin-left: 0px;
	min-width: 95px;
}
.el-popover.popoverTable{
	height: 240px;
    overflow: auto;
    .el-checkbox {
	    width: 120px;
	}
}
.popover_checck  .el-checkbox+.el-checkbox{
	margin-left: 0px;
}
</style>
